<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
		<link rel="stylesheet" href="css/fontface.css" />
		<link rel="stylesheet" href="css/kf2.0.css" />
		<link rel="stylesheet" href="css/base.css" />
	</head>

	<body style="font-family: '思源雅黑';">
		<div class="rel">
			<div class="abs f14" style="width:280px;top:0;left:0;">
				<div style="background:#fff;border:1px solid #ddd;">
					<div class="worn_div">
						<i class="iconfont vm" style="color:#ff7f7f;font-size: 16px;">&#xe6ee;</i>
						<span>拖拽可添加模块</span>
					</div>
					<ul class="newforms waterform">
						<li>
							<div class="move-item on">
								<span style="padding-left: 25px;">水牌底图</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div_bg clearfix">
								<div class="show_pic">
									<img src="img/waterCard/demo/uploadbg.png" id="bg" width="70" height="100" style="padding:10px;border:1px solid #ddd;" />
									<em id="spanButtonPlaceHolder" name="bg"></em>
									<input type="hidden" name="bgurl">
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="Type" text="租/售" width="70" height="70">
								<span style="padding-left: 25px;">类型</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示租售类型</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="Type" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="Type" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="Type" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="Type" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="Type" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="Type">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="Type">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="title" text="此处显示标题" width="250" height="50">
								<span style="padding-left: 25px;">标题</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>

							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示标题</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="title" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="title" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="title" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="title" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="title" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="title">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="title">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item IMG" draggable="true" ondragstart="drag(event)" id="PhotoFile" isimg="true" src="img/waterCard/demo/main.png" width="360" height="190">
								<span style="padding-left: 25px;">封面</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示房源封面</div>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="IMX" imx="PhotoFile" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="IMY" imy="PhotoFile" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										尺寸(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="宽度" name="IMW" imw="PhotoFile" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="长度" name="IMH" imh="PhotoFile" />
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item IMG" draggable="true" ondragstart="drag(event)" id="QrCode" isimg="true" src="img/waterCard/demo/code.png" width="90" height="90">
								<span style="padding-left: 25px;">二维码</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示二维码</div>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="IMX" imx="QrCode" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="IMY" imy="QrCode" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										尺寸(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="宽度" name="IMW" imw="QrCode" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="长度" name="IMH" imh="QrCode" />
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="OpenerPhone" text="此处显示联系电话" width="220" height="35">
								<span style="padding-left: 25px;">电话</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>

							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示联系电话</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="OpenerPhone" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="OpenerPhone" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="OpenerPhone" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="OpenerPhone" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="OpenerPhone" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="OpenerPhone">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="OpenerPhone">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="OpenerName" text="维护人" width="220" height="35">
								<span style="padding-left: 25px;">维护人</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示维护人</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="OpenerName" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="OpenerName" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="OpenerName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="OpenerName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="OpenerName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="OpenerName">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="OpenerName">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="TotalPriceStr" text="售价" width="220" height="35">
								<span style="padding-left: 25px;">售价</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示售价</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="TotalPriceStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="TotalPriceStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="TotalPriceStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="TotalPriceStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="TotalPriceStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="TotalPriceStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="TotalPriceStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="UnitPriceStr" text="单价(租金)" width="220" height="35">
								<span style="padding-left: 25px;">单价(租金)</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示单价(租金)</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="UnitPriceStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="UnitPriceStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="UnitPriceStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="UnitPriceStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="UnitPriceStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="UnitPriceStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="UnitPriceStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="FirstPay" text="首付" width="220" height="35">
								<span style="padding-left: 25px;">首付</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示首付</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="FirstPay" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="FirstPay" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="FirstPay" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="FirstPay" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="FirstPay" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="FirstPay">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="FirstPay">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="MonthPay" text="月供" width="220" height="35">
								<span style="padding-left: 25px;">月供</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示月供</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="MonthPay" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="MonthPay" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="MonthPay" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="MonthPay" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="MonthPay" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="MonthPay">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="MonthPay">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="Cantavil" text="小区名" width="220" height="35">
								<span style="padding-left: 25px;">小区</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示小区</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="Cantavil" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="Cantavil" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="Cantavil" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="Cantavil" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="Cantavil" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="Cantavil">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="Cantavil">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="AreaName" text="区域" width="220" height="35">
								<span style="padding-left: 25px;">区域</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示区域</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="AreaName" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="AreaName" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="AreaName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="AreaName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="AreaName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="AreaName">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="AreaName">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="CityName" text="城市" width="220" height="35">
								<span style="padding-left: 25px;">城市</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示城市</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="CityName" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="CityName" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="CityName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="CityName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="CityName" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="CityName">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="CityName">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="Slogan" text="广告语" width="220" height="35">
								<span style="padding-left: 25px;">广告语</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示广告语</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="Slogan" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="Slogan" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="Slogan" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="Slogan" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="Slogan" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="Slogan">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="Slogan">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="TaxPayModeStr" text="税费承担" width="220" height="35">
								<span style="padding-left: 25px;">税费承担</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示税费承担</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="TaxPayModeStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="TaxPayModeStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="TaxPayModeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="TaxPayModeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="TaxPayModeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="TaxPayModeStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="TaxPayModeStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="DoorModel" text="户型" width="220" height="35">
								<span style="padding-left: 25px;">户型</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示户型</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="DoorModel" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="DoorModel" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="DoorModel" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="DoorModel" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="DoorModel" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="DoorModel">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="DoorModel">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="NumberOfFloorStr" text="楼层" width="220" height="35">
								<span style="padding-left: 25px;">楼层</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示楼层</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="NumberOfFloorStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="NumberOfFloorStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="NumberOfFloorStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="NumberOfFloorStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="NumberOfFloorStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="NumberOfFloorStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="NumberOfFloorStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="FloorAreaStr" text="面积" width="220" height="35">
								<span style="padding-left: 25px;">面积</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示面积</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="FloorAreaStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="FloorAreaStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="FloorAreaStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="FloorAreaStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="FloorAreaStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="FloorAreaStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="FloorAreaStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="ParlorOrientationStr" text="朝向" width="220" height="35">
								<span style="padding-left: 25px;">朝向</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示朝向</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="ParlorOrientationStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="ParlorOrientationStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="ParlorOrientationStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="ParlorOrientationStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="ParlorOrientationStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="ParlorOrientationStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="ParlorOrientationStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>

						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="HouseFitmentStr" text="装修" width="220" height="35">
								<span style="padding-left: 25px;">装修</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示装修</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="HouseFitmentStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="HouseFitmentStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="HouseFitmentStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="HouseFitmentStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="HouseFitmentStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="HouseFitmentStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="HouseFitmentStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>

						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="BuildTypeStr" text="建筑类型" width="220" height="35">
								<span style="padding-left: 25px;">建筑类型</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>建筑类型</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="BuildTypeStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="BuildTypeStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="BuildTypeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="BuildTypeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="BuildTypeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="BuildTypeStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="BuildTypeStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>

						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="BuildTimeStr" text="建筑年代" width="220" height="35">
								<span style="padding-left: 25px;">建筑年代</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>
							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示建筑年代</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="BuildTimeStr" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="BuildTimeStr" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="BuildTimeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="BuildTimeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="BuildTimeStr" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="BuildTimeStr">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="BuildTimeStr">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>

						<li>
							<div class="move-item" draggable="true" ondragstart="drag(event)" id="DepartmentTel" text="此处显示部门电话" width="220" height="35">
								<span style="padding-left: 25px;">部门电话</span>
								<i class="iconfont" style="font-size:16px;float:right">&#xe64b;</i>
							</div>

							<div class="show_div clearfix">
								<div class="show_pic">
									<div class="show_text">
										<div>此处显示部门电话</div>
									</div>
								</div>
								<div class="show_color">
									<div class="color_div"><em></em></div>
									<input type="color" name="changeColor" color="DepartmentTel" />
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										坐标(px)
									</div>
									<div class="input_box">
										<input type="text" placeholder="X坐标" name="XWZ" xwz="DepartmentTel" />
									</div>
									<div class="dou">,</div>
									<div class="input_box">
										<input type="text" placeholder="Y坐标" name="YWZ" ywz="DepartmentTel" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										大小(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="字体大小" style="text-align:left" name="FS" fs="DepartmentTel" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										限宽(px)
									</div>
									<div class="input_box w160">
										<input type="text" placeholder="宽度限制" style="text-align:left" name="FW" fw="DepartmentTel" />
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体粗细
									</div>
									<div class="input_box w160">
										<select name="FWE" fwe="DepartmentTel">
											<option value="normal">正常</option>
											<option value="bold">粗体</option>
										</select>
									</div>
								</div>
								<div class="wrap5"></div>
								<div class="show_input clearfix">
									<div class="text_box">
										字体
									</div>
									<div class="input_box w160">
										<select name="FF" ff="DepartmentTel">
											<option value="黑体">黑体</option>
											<option value="思源黑体">思源黑体</option>
										</select>
									</div>
								</div>
							</div>
						</li>
					</ul>
					<div class="save_div">
						<a class="btn btn-sm" onclick="save()">保存</a>
					</div>
				</div>

			</div>
			<div class="l" style="padding-left:280px;background:#F6F6F6;width:100%;box-sizing: border-box;">
				<div style="width: 401px;height: 562px;margin:40px auto;padding:20px;background:#fff;border:1px solid #ddd">
					<canvas id="canvas" width="401" height="562" ondrop="drop(event)" ondragover="allowDrop(event)"></canvas>
				</div>
			</div>
		</div>
		<script>
			$(function() {
				$(".move-item").each(function() {
					$(this).on("click", function() {
						$(this).toggleClass("on");
					});
				});
				//var wh = $(".content-inner").height() - $(".content-header").outerHeight() - $(".content-header+.pstnr").height() - $(".worn_div").outerHeight() - $(".save_div").outerHeight();
				$(".waterform").css("height", 600).niceScroll({
					cursorcolor: "#dc0008",
					cursoropacitymin: 1
				});
				$(window).resize(function() {
					$(".waterform").css("height", 600).niceScroll({
						cursorcolor: "#dc0008",
						cursoropacitymin: 1
					});
				});
			});
			////////////////
			var j, isimg = false;
			var imagesbase = new Array(); //预加载图片
			var canvas = $('#canvas')[0];
			var context = canvas.getContext('2d');

			var cengKey, cengKeyText;
			var border2 = 0; //判断点击那张图片
			var border2_text = 0;
			/*var htmlstr = '@(content)'.replace(/&quot;/g, '"');
			var jsonstr = htmlstr;*/
			var jsonstr = '';
			abc();

			//////////////////////
			function createText() {
				this.textX = new Array(); //x坐标
				this.textY = new Array(); //y坐标
				this.textW = new Array(); //长度
				this.textH = new Array(); //高度/文字大小
				this.textN = new Array(); //name属性
				this.textF = new Array(); //字体
				this.textWE = new Array(); //文字粗细
				this.textUrl = new Array(); //文字内容
				this.color = new Array(); //文字顔色
			}
			//删除单个文字
			createText.prototype.removeWord = function(i) {
				this.textX.splice(i, 1);
				this.textY.splice(i, 1);
				this.textW.splice(i, 1);
				this.textH.splice(i, 1);
				this.textN.splice(i, 1);
				this.textF.splice(i, 1);
				this.textWE.splice(i, 1);
				this.textUrl.splice(i, 1);
				this.color.splice(i, 1);
			}
			createText.prototype.addText = function(text, width, height, event, name, color, family, weight) {
				if(event) {
					var pos = windowToCanvas(canvas, event.clientX, event.clientY);
					this.textUrl.push(text);
					this.textW.push(width);
					this.textH.push(height == 0 ? 14 : height);
					this.textX.push(pos.x - width * 0.5);
					this.textY.push(pos.y - height * 0.5);
					this.textF.push(family); //字体
					this.textWE.push(weight); //文字粗细
					this.textN.push(name);
					this.color.push(color);
					drawImage2();
				}
			}
			createText.prototype.drawText = function(ctx, j) {
				var i, X, Y, W, H, F, WE;
				i = this.textUrl[j];
				X = this.textX[j];
				Y = this.textY[j];
				W = this.textW[j];
				H = this.textH[j];
				F = (typeof(this.textF[j]) != "undefined" && this.textF[j] != "undefined") ? " " + this.textF[j] : ' 黑体'; //字体
				WF = (typeof(this.textWE[j]) != "undefined" && this.textWE[j] != "undefined") ? this.textWE[j] + " " : 'normal '; //文字粗细
				ctx.beginPath();
				//ctx.font = WF + H + 'px'+WF;
				ctx.font = WF + H + "px" + F;
				ctx.fillStyle = this.color[j];
				ctx.textAlign = 'left';
				//console.info(X, W, (X + W) / 2);
				//ctx.fillText(i, X + W / 2, Y + H * 0.87, W);
				ctx.fillText(i, X, Y + H * 0.87, W);
				ctx.restore();
				ctx.strokeStyle = '#dd0811';
				ctx.lineWidth = 1;
				ctx.beginPath();
				ctx.moveTo(X + W, Y);
				ctx.lineTo(X + W, H + Y);
				ctx.stroke();
				ctx.beginPath();
				ctx.moveTo(X, H + Y);
				ctx.lineTo(X + W, H + Y);
				ctx.stroke();
				ctx.beginPath();
				ctx.moveTo(X, Y);
				ctx.lineTo(X, Y + H);
				ctx.stroke();
				ctx.beginPath();
				ctx.moveTo(X, Y);
				ctx.lineTo(X + W, Y);
				ctx.stroke();

				ctx.strokeStyle = '#dd0811';
				ctx.strokeRect(X - 4, Y - 4, 8, 8);
				ctx.strokeRect(X - 4, Y + H - 4, 8, 8);
				ctx.strokeRect(X + W - 4, Y + H - 4, 8, 8);
				ctx.strokeRect(X + W - 4, Y - 4, 8, 8);
				ctx.drawImage(imagesbase[0], X + W, Y + 8, 18, 18);
				ctx.fillStyle = '#fff';
				ctx.fillRect(X - 3, Y - 3, 6, 6);
				ctx.fillRect(X - 3, Y + H - 3, 6, 6);
				ctx.fillRect(X + W - 3, Y + H - 3, 6, 6);
				ctx.fillRect(X + W - 3, Y - 3, 6, 6);
			}

			//绑定事件
			createText.prototype.binding = function(j, ctx, canvas, pos) {
				var arr = [{ //右边
					x: this.textX[j] + this.textW[j] - 4,
					y: this.textY[j] + 4,
					width: 8,
					height: this.textH[j] - 8
				}, { //下边
					x: this.textX[j] + 4,
					y: this.textY[j] + this.textH[j] - 4,
					width: this.textW[j] - 8,
					height: 8
				}, { //左边
					x: this.textX[j] - 4,
					y: this.textY[j] + 4,
					width: 8,
					height: this.textH[j] - 8
				}, { //上边
					x: this.textX[j] + 4,
					y: this.textY[j] - 4,
					width: this.textW[j] - 8,
					height: 8
				}, { //本体
					x: this.textX[j] + 4,
					y: this.textY[j] + 4,
					width: this.textW[j] - 8,
					height: this.textH[j] - 8
				}, { //关闭按钮
					x: this.textX[j] + this.textW[j],
					y: this.textY[j] + 8,
					width: 18,
					height: 18
				}, { //左上点
					x: this.textX[j] - 4,
					y: this.textY[j] - 4,
					width: 8,
					height: 8
				}, { //左下点
					x: this.textX[j] - 4,
					y: this.textY[j] + this.textH[j] - 4,
					width: 8,
					height: 8
				}, { //右下点
					x: this.textX[j] + this.textW[j] - 4,
					y: this.textY[j] + this.textH[j] - 4,
					width: 8,
					height: 8

				}, { //右上点
					x: this.textX[j] + this.textW[j] - 4,
					y: this.textY[j] - 4,
					width: 8,
					height: 8
				}];
				var that = this;
				for(var i = 0; i < arr.length; i++) {
					border_len_text++;
					ctx.restore();
					//ctx.save();
					ctx.beginPath();
					ctx.fillStyle = 'transparent';
					ctx.rect(arr[i].x, arr[i].y, arr[i].width, arr[i].height);
					ctx.fill();
					if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 2) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "e-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.textW[j];
							var n = that.textW[j] + x * 2;
							m = m / n;
							if(that.textW[j] * m > 5) {
								that.textX[j] += x * m;
								that.textW[j] = that.textW[j] * m;
							}
							pos = pos1;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 0) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "e-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var m = that.textW[j];
							var n = that.textW[j] + x * 2;
							m = n / m;
							if(that.textW[j] * m > 5) {
								that.textX[j] -= x;
								that.textW[j] = that.textW[j] * m;
							}
							pos = pos1;
							drawImage2();
						}
					}
					//heighter
					else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 1) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "n-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var y = pos1.y - pos.y;
							var m = that.textH[j];
							var n = that.textH[j] + y * 2;
							m = n / m;
							if(that.textW[j] * m > 5) {
								that.textY[j] -= y;
								that.textH[j] = that.textH[j] * m;
							}
							pos = pos1;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 3) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "n-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.textH[j];
							var n = that.textH[j] + y * 2;
							m = m / n;
							if(that.textH[j] * m > 5) {
								that.textY[j] += y;
								that.textH[j] = that.textH[j] * m;
							}
							pos = pos1;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 5) {
						cengKeyText = j;
						cengKey = imgObject.imgUrl.length;
						canvas.style.cursor = "pointer";
						remove1();
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 6) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "nw-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.textW[j];
							var n = that.textW[j] - x;
							m = n / m;
							var h = that.textH[j];
							if(m > 0) {
								that.textW[j] -= x;
								that.textX[j] += x;
								that.textH[j] = that.textH[j] * m;
								that.textY[j] += h - that.textH[j];
							}
							pos = pos1;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 7) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "sw-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var m = that.textW[j];
							var n = that.textW[j] - x;
							m = n / m;
							if(m > 0) {
								that.textX[j] += x;
								that.textW[j] = that.textW[j] * m;
								that.textH[j] = that.textH[j] * m;
							}
							pos = pos1;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 8) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "se-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var m = that.textW[j];
							var n = that.textW[j] + x;
							m = n / m;
							if(m > 0) {
								that.textW[j] = that.textW[j] * m;
								that.textH[j] = that.textH[j] * m;
							}
							pos = pos1;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 9) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "sw-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.textH[j];
							var n = that.textH[j] - y;
							m = n / m;
							var w = that.textW[j];
							if(m > 0) {
								that.textH[j] -= y;
								that.textY[j] += y;
								that.textW[j] = that.textW[j] * m;
							}
							pos = pos1;
							drawImage2();
						}
					}
					//move
					else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 4) {
						border2_text = j + 1;
						cengKeyText = j;
						canvas.style.cursor = "move";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							pos = pos1;
							that.textX[j] += x;
							that.textY[j] += y;
							border2_text = 0;
							drawImage2();
						}
					} else {
						if(border_len_text == (that.textUrl.length * arr.length)) {
							if(border2_text == 0) {
								cengKeyText = that.textUrl.length;
								if(!isimg) {
									canvas.style.cursor = "auto";
									isimg = false;
								}
								console.info("auto", cengKey);
								drawImage2();
							} else {
								cengKeyText = border2_text - 1;
								border2_text = 0;
								drawImage2();
							}
						}
					}
				}
			}

			var textObject = new createText();
			//////////////////////
			//////////////////////
			function createImage() {
				this.imgX = new Array(); //x坐标
				this.imgY = new Array(); //y坐标
				this.imgW = new Array(); //长度缩放比例
				this.imgH = new Array(); //高度缩放比例
				this.imgN = new Array(); //name属性
				this.imgUrl = new Array(); //图片内容
			}
			//新增一个图片信息
			createImage.prototype.addImg = function(imgsrc, width, height, event, name) {
				var img = new Image();
				var that = this;
				img.crossOrigin = "*";
				img.src = imgsrc;
				that.imgUrl.push(img);
				if(event) {
					var pos = windowToCanvas(canvas, event.clientX, event.clientY);
					img.addEventListener("load", function() {
						that.imgW.push(width);
						that.imgH.push(height);
						that.imgX.push(pos.x - width * 0.5);
						that.imgY.push(pos.y - height * 0.5);
						that.imgN.push(name);
						drawImage2();
					});
				}
			}
			//画单个图片
			createImage.prototype.drawImg = function(ctx, j) {
				var i, X, Y, W, H, r, border;
				i = this.imgUrl[j];
				X = this.imgX[j];
				Y = this.imgY[j];
				W = this.imgW[j];
				H = this.imgH[j];
				ctx.beginPath();
				ctx.drawImage(i, 0, 0, i.width, i.height, X, Y, W, H);
				ctx.strokeStyle = '#dd0811';
				ctx.lineWidth = 1;
				ctx.beginPath();
				ctx.moveTo(X + W, Y);
				ctx.lineTo(X + W, H + Y);
				ctx.stroke();
				ctx.beginPath();
				ctx.moveTo(X, H + Y);
				ctx.lineTo(X + W, H + Y);
				ctx.stroke();
				ctx.beginPath();
				ctx.moveTo(X, Y);
				ctx.lineTo(X, Y + H);
				ctx.stroke();
				ctx.beginPath();
				ctx.moveTo(X, Y);
				ctx.lineTo(X + W, Y);
				ctx.stroke();
				ctx.beginPath();

				ctx.strokeStyle = '#dd0811';
				ctx.strokeRect(X - 4, Y - 4, 8, 8);
				ctx.strokeRect(X - 4, Y + H - 4, 8, 8);
				ctx.strokeRect(X + W - 4, Y + H - 4, 8, 8);
				ctx.strokeRect(X + W - 4, Y - 4, 8, 8);
				ctx.drawImage(imagesbase[0], X + W, Y + 8, 18, 18);
				ctx.fillStyle = '#fff';
				ctx.fillRect(X - 3, Y - 3, 6, 6);
				ctx.fillRect(X - 3, Y + H - 3, 6, 6);
				ctx.fillRect(X + W - 3, Y + H - 3, 6, 6);
				ctx.fillRect(X + W - 3, Y - 3, 6, 6);

			}
			createImage.prototype.removeImg = function(i) {
				this.imgX.splice(i, 1);
				this.imgY.splice(i, 1);
				this.imgW.splice(i, 1);
				this.imgH.splice(i, 1);
				this.imgN.splice(i, 1);
				this.imgUrl.splice(i, 1);
			}

			//绑定事件
			createImage.prototype.binding = function(j, ctx, canvas, pos) {
				var arr = [{ //右边
					x: this.imgX[j] + this.imgW[j] - 4,
					y: this.imgY[j] + 4,
					width: 8,
					height: this.imgH[j] - 8
				}, { //下边
					x: this.imgX[j] + 4,
					y: this.imgY[j] + this.imgH[j] - 4,
					width: this.imgW[j] - 8,
					height: 8
				}, { //左边
					x: this.imgX[j] - 4,
					y: this.imgY[j] + 4,
					width: 8,
					height: this.imgH[j] - 8
				}, { //上边
					x: this.imgX[j] + 4,
					y: this.imgY[j] - 4,
					width: this.imgW[j] - 8,
					height: 8
				}, { //本体
					x: this.imgX[j] + 4,
					y: this.imgY[j] + 4,
					width: this.imgW[j] - 8,
					height: this.imgH[j] - 8
				}, { //左上点
					x: this.imgX[j] - 4,
					y: this.imgY[j] - 4,
					width: 8,
					height: 8
				}, { //关闭按钮
					x: this.imgX[j] + this.imgW[j],
					y: this.imgY[j] + 8,
					width: 18,
					height: 18
				}, { //左下点
					x: this.imgX[j] - 4,
					y: this.imgY[j] + this.imgH[j] - 4,
					width: 8,
					height: 8
				}, { //右下点
					x: this.imgX[j] + this.imgW[j] - 4,
					y: this.imgY[j] + this.imgH[j] - 4,
					width: 8,
					height: 8

				}, { //右上点
					x: this.imgX[j] + this.imgW[j] - 4,
					y: this.imgY[j] - 4,
					width: 8,
					height: 8
				}];
				var that = this;
				for(var i = 0; i < arr.length; i++) {
					border_len++;
					ctx.restore();
					//ctx.save();
					ctx.beginPath();
					ctx.fillStyle = 'transparent';
					ctx.rect(arr[i].x, arr[i].y, arr[i].width, arr[i].height);
					ctx.fill();
					if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 2) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "e-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.imgW[j];
							var n = that.imgW[j] + x * 2;
							m = m / n;
							if(that.imgW[j] * m > 5) {
								that.imgX[j] += x * m;
								that.imgW[j] = that.imgW[j] * m;
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 0) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "e-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var m = that.imgW[j];
							var n = that.imgW[j] + x * 2;
							m = n / m;
							if(that.imgW[j] * m > 5) {
								that.imgX[j] -= x;
								that.imgW[j] = that.imgW[j] * m;
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					}
					//heighter
					else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 1) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "n-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var y = pos1.y - pos.y;
							var m = that.imgH[j];
							var n = that.imgH[j] + y * 2;
							m = n / m;
							if(that.imgW[j] * m > 5) {
								that.imgY[j] -= y;
								that.imgH[j] = that.imgH[j] * m;
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 3) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "n-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.imgH[j];
							var n = that.imgH[j] + y * 2;
							m = m / n;
							if(that.imgH[j] * m > 5) {
								that.imgY[j] += y;
								that.imgH[j] = that.imgH[j] * m;
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 8) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "se-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var m = that.imgW[j];
							var n = that.imgW[j] + x;
							m = n / m;
							if(m > 0) {
								that.imgW[j] = that.imgW[j] * m;
								that.imgH[j] = that.imgH[j] * m;
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 6) {
						//border2 = j + 1;
						cengKey = j;
						cengKeyText = textObject.textUrl.length;
						canvas.style.cursor = "pointer";
						remove1();
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 7) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "sw-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var m = that.imgW[j];
							var n = that.imgW[j] - x;
							m = n / m;
							if(m > 0) {
								that.imgX[j] += x;
								that.imgW[j] = that.imgW[j] * m;
								that.imgH[j] = that.imgH[j] * m;
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 5) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "nw-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.imgW[j];
							var n = that.imgW[j] - x;
							m = n / m;
							var h = that.imgH[j];
							if(m > 0) {
								that.imgW[j] -= x;
								that.imgX[j] += x;
								that.imgH[j] = that.imgH[j] * m;
								that.imgY[j] += h - that.imgH[j];
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					} else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 9) {
						border2 = j + 1;
						cengKey = j;
						isimg = true;
						canvas.style.cursor = "sw-resize";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							var m = that.imgH[j];
							var n = that.imgH[j] - y;
							m = n / m;
							var w = that.imgW[j];
							if(m > 0) {
								that.imgH[j] -= y;
								that.imgY[j] += y;
								that.imgW[j] = that.imgW[j] * m;
							}
							pos = pos1;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					}
					//move
					else if(pos && ctx.isPointInPath(pos.x, pos.y) && i == 4) {
						border2 = j + 1;
						cengKey = j;
						console.info("move", cengKey);
						isimg = true;
						canvas.style.cursor = "move";
						canvas.onmousemove = function(event) {
							var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
							var x = pos1.x - pos.x;
							var y = pos1.y - pos.y;
							pos = pos1;
							that.imgX[j] += x;
							that.imgY[j] += y;
							cengKey = j;
							border2 = 0;
							drawImage2();
						}
					} else {
						if(border_len == (that.imgUrl.length * arr.length)) {
							if(border2 == 0) {
								canvas.style.cursor = "auto";
								drawImage2();
							} else {
								cengKey = border2 - 1;
								border2 = 0;
								drawImage2();
							}
						}
					}
				}
			}
			var imgObject = new createImage();
			//////////////////////////////////
			function drawImage2() {
				context.clearRect(0, 0, canvas.width, canvas.height);
				context.beginPath();
				context.fillStyle = "#fff";
				context.fillRect(0, 0, canvas.width, canvas.height);
				if(imagesbase[1] != undefined) {
					context.drawImage(imagesbase[1], 0, 0, imagesbase[1].width, imagesbase[1].height, 0, 0, canvas.width, canvas.height);
				}
				for(var i = 0; i < imgObject.imgUrl.length; i++) {
					imgObject.drawImg(context, i);
				}
				for(var i = 0; i < textObject.textUrl.length; i++) {
					textObject.drawText(context, i);
					//console.info($(".move-item[text='" + textObject.textUrl[i] + "']>span").eq(0));
					//var text = $(".move-item[text='" + textObject.textUrl[i] + "']>span").eq(0).text();
				}
			}

			function remove1() {
				//防止编辑文字时触发
				if(cengKeyText < textObject.textUrl.length) {
					textObject.removeWord(cengKeyText);
					drawImage2();
					return;
				} else if(cengKey < imgObject.imgUrl.length) {
					imgObject.removeImg(cengKey);
					drawImage2();
					return
				}
			}

			function strJsonToJson() {
				var tq = '{"background":';
				tq += '"' + $("[name=bgurl]").eq(0).val() + '",' + '"imgarray":[';
				for(var i = 0; i < imgObject.imgUrl.length; i++) {
					tq += '{"imgX":' + imgObject.imgX[i] + ',"imgY":' + imgObject.imgY[i] + ',"imgW":' + imgObject.imgW[i] + ',"imgH":' + imgObject.imgH[i] + ',"imgN":"' + imgObject.imgN[i] + '","imgUrl":"' + imgObject.imgUrl[i].src + '"}';
					if(i < imgObject.imgX.length - 1)
						tq += ",";
				}
				tq += '],"textarray":[';
				for(var i = 0; i < textObject.textUrl.length; i++) {
					tq += '{"textX":' + textObject.textX[i] + ',"textY":' + textObject.textY[i] + ',"textW":' + textObject.textW[i] + ',"textH":' + textObject.textH[i] + ',"textN":"' + textObject.textN[i] + '","color":"' + textObject.color[i] + '","textUrl":"' + textObject.textUrl[i] + '","textF":"' + textObject.textF[i] + '","textWE":"' + textObject.textWE[i] + '"}';
					if(i < textObject.textX.length - 1)
						tq += ",";
				}
				tq += "]}";
				return tq;
			}

			function save() {
				var wateCardConfig = new Array();
				wateCardConfig.push(strJsonToJson());
				tq = escape(wateCardConfig); //加密
				var date = new Date();
				downloadFile(date.getHours() + date.getMinutes() + date.getSeconds() + "保存码.txt", tq);
				saveFile(canvas.toDataURL("image/png"), date.getHours() + '' + date.getMinutes() + '' + date.getSeconds() + "户型图.png");
				console.info(wateCardConfig);
				console.info(canvas.toDataURL("image/png"));
			}
			/**
			 * 在本地进行文件保存
			 * @param  {String} data     要保存到本地的图片数据
			 * @param  {String} filename 文件名
			 */
			var saveFile = function(data, filename) {
				var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
				save_link.href = data;
				save_link.download = filename;

				var event = document.createEvent('MouseEvents');
				event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
				save_link.dispatchEvent(event);
			};
			//txt文件保存
			function downloadFile(fileName, content) {
				var aLink = document.createElement('a');
				var blob = new Blob([content]);
				var evt = document.createEvent("HTMLEvents");
				evt.initEvent("click", false, false); //initEvent 不加后两个参数在FF下会报错
				aLink.download = fileName;
				aLink.href = URL.createObjectURL(blob);
				aLink.dispatchEvent(evt);
				aLink.click();
				$("body").append($(aLink));
			}
			//绑定鼠标方法
			function abc() {
				canvas.addEventListener('mousemove', function(e) {
					border_len1 = 0;
					border_len_text1 = 0;
				}, false);
				canvas.addEventListener('mousedown', function(e) {
					border_len = 0;
					border_len_text = 0;
					border_len_text2 = 0;
					for(var j = 0; j < imgObject.imgUrl.length + textObject.textUrl.length; j++) {
						reDraw(j, e);
					}
				}, false);
				canvas.addEventListener('mouseup', function(e) {
					canvas.onmousemove = null;
					canvas.onmouseup = null;
					setText();
					//判断是否画框架
					drawImage2();
					canvas.style.cursor = "auto";
				}, false);
			}

			function setText() {
				for(var i = 0; i < imgObject.imgUrl.length; i++) {
					imgObject.imgX[i] = Number(imgObject.imgX[i].toFixed(2));
					imgObject.imgY[i] = Number(imgObject.imgY[i].toFixed(2));
					imgObject.imgW[i] = Number(imgObject.imgW[i].toFixed(2));
					imgObject.imgH[i] = Number(imgObject.imgH[i].toFixed(2));
					$("#" + imgObject.imgN[i] + "+.show_div").find("[name='IMX']").val(imgObject.imgX[i]);
					$("#" + imgObject.imgN[i] + "+.show_div").find("[name='IMY']").val(imgObject.imgY[i]);
					$("#" + imgObject.imgN[i] + "+.show_div").find("[name='IMW']").val(imgObject.imgW[i]);
					$("#" + imgObject.imgN[i] + "+.show_div").find("[name='IMH']").val(imgObject.imgH[i]);
				}
				for(var i = 0; i < textObject.textUrl.length; i++) {
					textObject.textX[i] = Number(textObject.textX[i].toFixed(2));
					textObject.textY[i] = Number(textObject.textY[i].toFixed(2));
					textObject.textW[i] = Number(textObject.textW[i].toFixed(2));
					textObject.textH[i] = Number(textObject.textH[i].toFixed(2));
					textObject.textWE[i] = (typeof(textObject.textWE[j]) != "undefined" && textObject.textWE[j] != "undefined") ? textObject.textWE[i] : "normal";
					textObject.textF[i] = (typeof(textObject.textF[j]) != "undefined" && textObject.textF[j] != "undefined") ? textObject.textF[i] : "黑体";

					$(".move-item[text='" + textObject.textUrl[i] + "']+.show_div").find("[name='XWZ']").val(textObject.textX[i]);
					$(".move-item[text='" + textObject.textUrl[i] + "']+.show_div").find("[name='YWZ']").val(textObject.textY[i]);
					$(".move-item[text='" + textObject.textUrl[i] + "']+.show_div").find("[name='FS']").val(textObject.textH[i]);
					$(".move-item[text='" + textObject.textUrl[i] + "']+.show_div").find("[name='FW']").val(textObject.textW[i]);
					$(".move-item[text='" + textObject.textUrl[i] + "']+.show_div").find("[name='FWE']").val(textObject.textWE[i]);
					$(".move-item[text='" + textObject.textUrl[i] + "']+.show_div").find("[name='FF']").val(textObject.textF[i]);
				}
			}
			//getcanvas();

			function getcanvas() {
				if(jsonstr == '') {
					return;
				}
				var images = {};
				var time = 0;
				var json = JSON.parse(jsonstr);
				console.info(json);
				var item = 0;
				$("[name=bg]").prev("img").attr("src", json.background);
				$("[name=bgurl]").eq(0).val(json.background);
				$.Jq_Ajax.post({
					url: "/Common/GetPhotosBase64Str",
					data: {
						ids: json.background
					},
					onSuccess: function(res) {
						var sources = {
							clockbtn: "/img/waterCard/demo/clockBtn.png",
							bg: "data:image/jpg;base64," + res.Extend
						};
						for(src in sources) {
							images[src] = new Image();
							images[src].crossOrigin = "*";
							images[src].src = sources[src];
							console.info(src);
							images[src].onload = function() {
								time++;
							}
							imagesbase.push(images[src]);
						}

						for(var i = 0; i < json.imgarray.length; i++) {
							var img = new Image();
							var that = this;
							img.crossOrigin = "*";
							img.src = json.imgarray[i].imgUrl;
							imgObject.imgUrl.push(img);

							img.onload = function() {
								time++;
								console.info(time);
							}
							imgObject.imgW.push(json.imgarray[i].imgW);
							imgObject.imgH.push(json.imgarray[i].imgH);
							imgObject.imgX.push(json.imgarray[i].imgX);
							imgObject.imgY.push(json.imgarray[i].imgY);
							imgObject.imgN.push(json.imgarray[i].imgN);

						}
						for(var j = 0; j < json.textarray.length; j++) {

							textObject.textUrl.push(json.textarray[j].textUrl);
							textObject.textW.push(json.textarray[j].textW);
							textObject.textH.push(json.textarray[j].textH);
							textObject.textX.push(json.textarray[j].textX);
							textObject.textY.push(json.textarray[j].textY);
							textObject.textN.push(json.textarray[j].textN);
							textObject.color.push(json.textarray[j].color);
							textObject.textF.push(json.textarray[j].textF);
							textObject.textWE.push(json.textarray[j].textWE);
							$("[color=" + json.textarray[j].textN + "]").val(json.textarray[j].color);
							$("[color=" + json.textarray[j].textN + "]").prev().find("em").css({
								"background": json.textarray[j].color
							});
						}
						setText();
						//loadImages(sources);
						var start = setInterval(function() {
							if(time == json.imgarray.length + 2) {
								drawImage2();
								clearInterval(start);
							}
						}, 500);
					}
				});
			}

			//绑定元件事件
			function reDraw(j, event) {
				//获取相对画布的坐标
				var pos = windowToCanvas(canvas, event.clientX, event.clientY);
				//绑定所有元件的鼠标事件
				if(j < imgObject.imgUrl.length) {
					imgObject.binding(j, context, canvas, pos);
				} else {
					textObject.binding(j - imgObject.imgUrl.length, context, canvas, pos);
				}
			}
			//////////////

			function allowDrop(ev) {
				ev.preventDefault();
			}

			function drag(ev) {
				j = $(ev.target);
				ev.dataTransfer.setData("Text", "");
			}

			function drop(ev) {
				var img = new Image();
				var data = j.attr("src");
				img.src = data;
				img.crossOrigin = "*";
				var isimg = j.attr("isimg");
				console.info(data, j.attr("width"), j.attr("height"), ev, isimg);
				var name = j.attr("id");
				var color = $("[color=" + name + "]").eq(0).val();
				var fs = $("[fs=" + name + "]").eq(0).val();
				var ff = $("[ff=" + name + "]").eq(0).val();
				var fwe = $("[fwe=" + name + "]").eq(0).val();
				console.info(imagesbase);
				if(imagesbase.length < 2) {
					console.info("请设置背景图");
					return;
				} else {
					if(isimg) {
						img.onload = function() {
							imgObject.addImg(data, parseInt(j.attr("width")), parseInt(j.attr("height")), ev, j.attr("id"));
						}
					} else {
						textObject.addText(j.attr("text"), parseInt(j.attr("width")), parseInt(j.attr("height")), ev, name, color, ff, fwe);
					}
				}
			}

			$("[name=changeColor]").each(function() {
				$(this).on("change", function() {
					var name = $(this).attr("color");
					var color = $(this).val();
					console.info(name, color);
					$(this).prev().find("em").css({
						"background": $(this).val()
					});
					for(var i = 0; i < textObject.textN.length; i++) {
						if(textObject.textN[i] == name) {
							textObject.color[i] = color;
						}
					}
					drawImage2();
				})
			});
			var ary1 = [{
					name: "XWZ"
				},
				{
					name: "YWZ"
				},
				{
					name: "FS"
				},
				{
					name: "FW"
				},
			];
			var ary2 = [{
					name: "FWE"
				},
				{
					name: "FF"
				},
			];
			for(var j = 0; j < ary1.length; j++) {
				$("[name=" + ary1[j].name + "]").each(function() {
					$(this).on("blur", function() {
						var name = $(this).attr($(this).attr("name").toLowerCase());
						var x = Number($(this).val());
						for(var i = 0; i < textObject.textN.length; i++) {
							if(textObject.textN[i] == name) {
								switch($(this).attr("name")) {
									case "XWZ":
										textObject.textX[i] = x;
										break;
									case "YWZ":
										textObject.textY[i] = x;
										break;
									case "FS":
										textObject.textH[i] = x;
										break;
									case "FW":
										textObject.textW[i] = x;
										break;
								}
							}
						}
						drawImage2();
					})
				});
			}
			for(var j = 0; j < ary2.length; j++) {
				$("[name=" + ary2[j].name + "]").each(function() {
					$(this).on("change", function() {
						var name = $(this).attr($(this).attr("name").toLowerCase());
						var x = $(this).val();
						for(var i = 0; i < textObject.textN.length; i++) {
							if(textObject.textN[i] == name) {
								switch($(this).attr("name")) {
									case "FWE":
										textObject.textWE[i] = x;
										break;
									case "FF":
										textObject.textF[i] = x;
										break;
								}
							}
						}
						drawImage2();
					})
				});
			}

			$(".move-item.IMG+.show_div ").each(function() {
				var _this = $(this);
				$(this).find("input").on("blur", function() {
					var id = $(this).attr($(this).attr("name").toLowerCase());
					var name = $(this).attr("name");
					var x = Number($(this).val());
					var i;
					//if (id == "PhotoFile") {
					//    i = 0;
					//} else if (id == "QrCode") {
					//    i = 1;
					//}

					if(imgObject.length > 0) {
						for(var j = 0; j < imgObject.length; j++) {
							if(id == imgObject[j].imgN) {
								i = j;
							}
						}
						switch($(this).attr("name")) {
							case "IMX":
								imgObject.imgX[i] = x;
								break;
							case "IMY":
								imgObject.imgX[i] = x;
								break;
							case "IMW":
								imgObject.imgW[i] = x;
								break;
							case "IMH":
								imgObject.imgH[i] = x;
								break;
						}
						drawImage2();
					} else {
						i = 0;
					}

				})
			});
			//获取坐标
			function windowToCanvas(canvas, x, y) {
				var bbox = canvas.getBoundingClientRect();
				return {
					x: x - bbox.left - (bbox.width - canvas.width) / 2,
					y: y - bbox.top - (bbox.height - canvas.height) / 2
				};
			}

			function loadImages(sources) {
				var count = 0,
					images = {},
					imgNum = 0;
				imagesbase.splice(0, imagesbase.length);
				for(src in sources) {
					imgNum++;
				}
				for(src in sources) {
					images[src] = new Image();
					images[src].crossOrigin = "*";
					images[src].onload = function() {
						if(++count >= imgNum) {
							imgbool = count;
						}
					}
					images[src].src = sources[src];
					imagesbase.push(images[src]);
				}
			}
			var sources = {
				clockbtn: "img/waterCard/demo/clockBtn.png",
				bg: "img/waterCard/demo1/bg.png"
			};
			$("#bg").attr("src", "img/waterCard/demo1/bg.png");
			$("[name=bgurl]").val("img/waterCard/demo1/bg.png");
			var img = new Image();
			img.src = "img/waterCard/demo1/bg.png";
			img.crossOrigin = "*";
			img.onload = function() {
				drawImage2();
			}
			loadImages(sources);
		</script>

	</body>

</html>